<template>
    <ul class="footer">
        <router-link :to="{name:item.name}" class="tabbar-item" 
            v-for="(item,index) in tabBarIcon" :key='index' 
            tag='li' active-class='active'>
            <img :src="item.url" alt="">
            <img class="active-img" :src="item.checked" alt="">
            <p>{{item.val}}</p>
        </router-link>
    </ul>
</template>

<script>
export default {
    name:"",
    data:()=>({
        tabBarIcon:[
            {
                url:require('../assets/img/coming.png'),
                checked:require('../assets/img/coming-active.png'),
                val:'阅读',
                name:'Articles'
            },
            {
                url:require('../assets/img/ing.png'),
                checked:require('../assets/img/ing-active.png'),
                val:'电影',
                name:'Movies'
            }
        ]
    })
}
</script>

<style scoped lang='scss'>
.footer{
    display: flex;
    justify-content : space-around;
    height:0.45rem;
    width:100%;
    position: fixed;
    bottom: 0;
    background: #e5e5e5;
    box-shadow: inset 0 0 0 0 #E1E1E1;
    border-top:1px solid #ccc;
    .tabbar-item{
        display:flex;
        width:25%;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content : center;
        img{
            width:0.28rem;
            height:0.28rem;
            display: inline-block;
        }
        .active-img{
            display: none;
        }
        p{
            font-size: 0.1rem;
            color:#666;
            width:0.48rem;
            text-align: center;
            padding-top:0.02rem;
        }
    }
    .active{
        img{
            display: none;    
        }
        .active-img{
            display: inline-block;
        }
        p{
            color:#268dcd;
        }
    }
}
</style>



